<template>
  <el-dialog
    :title="taskNo"
    :visible.sync="dialogVisible"
    width="1360px"
    @closed="closeTaskForm"
    :append-to-body="currStep === -1"
    :modal="currStep === -1"
    :close-on-click-modal="false"
    :show-close="false"
    top="5vh"
  >
    <div class="dt-icon-send" @click="showSendDialog" v-if="!isModeCreate">
      <i></i>
    </div>
    <div class="dt-icon-close" @click="closeTaskForm">
      <i></i>
    </div>
    <div class="dt-task-card">
      <div class="dt-card-form">
        <el-form :model="taskForm" :rules="taskRules" ref="taskForm" label-width="160px" :hide-required-asterisk="isModeView">
          <!--1-->
          <div class="dt-form-name">
            <p class="dt-name-p" v-if="isModeView">{{ taskForm.taskName }}</p>
            <el-form-item v-else :label="isModeView ? '' : '任务名称'" prop="taskName" size="medium" :label-width="isModeView ? '0' : '170px'">
              <el-input
                placeholder="请输入内容"
                v-model="taskForm.taskName"
                maxlength="20"
                show-word-limit
                @change="editTask({ taskName: taskForm.taskName })"
                :disabled="isReadonly"
              ></el-input>
            </el-form-item>
          </div>
          <!--2-->
          <div class="dt-form-items">
            <el-form-item label="" label-width="0">
              <div class="dt-info-item">
                <div class="dt-item-icon">
                  <el-dropdown trigger="click" placement="bottom-start" v-if="isChangeTask" @command="toogleTask">
                    <span class="el-dropdown-link">
                      <em :class="['dt-icon-img', dtIconState.class]"></em>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="0" :disabled="taskState !== 1">关闭任务</el-dropdown-item>
                      <el-dropdown-item command="1" :disabled="taskState !== 8">重新激活</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <em :class="['dt-icon-img', dtIconState.class]" v-else></em>
                </div>
                <div class="dt-item-text">
                  <h4>当前状态</h4>
                  <b>{{ dtIconState.text }}</b>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="masterUid" label-width="0">
              <div class="dt-info-item">
                <PublicSelectHeader
                  :option="optHeaderMaster0"
                  :readonly="isReadonly"
                  :required="true"
                  @select="selectUser($event, '0')"
                  ref="headerMaster0"
                />
                <div class="dt-item-text">
                  <h4 :class="{ 'is-required': !isModeView }">负责人</h4>
                  <b v-if="taskForm.masterUid">{{ masterUserName }}</b>
                  <span v-else>请选择负责人</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="startTime" label-width="0">
              <div class="dt-info-item">
                <div class="dt-item-icon" @click="showDatePicker('0')">
                  <em :class="{ 'dt-icon-img': true, 'dt-icon-date-0': !isReadonly, 'dt-icon-date-1': isReadonly }"></em>
                  <el-date-picker
                    v-model="taskForm.startTime"
                    type="date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions0"
                    ref="dataPicker0"
                    @change="editTask({ startTime: taskForm.startTime.substring(0, 10) + ' 00:00:00' })"
                    :disabled="isReadonly"
                  ></el-date-picker>
                </div>
                <div class="dt-item-text">
                  <h4 :class="{ 'is-required': !isModeView }">开始时间</h4>
                  <b v-if="taskForm.startTime">{{ taskForm.startTime | filterDate }}</b>
                  <span v-else>请选择开始时间</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="endTime" label-width="0">
              <div class="dt-info-item">
                <div class="dt-item-icon" @click="showDatePicker('1')">
                  <em :class="{ 'dt-icon-img': true, 'dt-icon-date-0': !isReadonly, 'dt-icon-date-1': isReadonly }"></em>
                  <el-date-picker
                    v-model="taskForm.endTime"
                    type="date"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions1"
                    ref="dataPicker1"
                    @change="editTask({ endTime: taskForm.endTime.substring(0, 10) + ' 23:59:59' })"
                    :disabled="isReadonly"
                  ></el-date-picker>
                </div>
                <div class="dt-item-text">
                  <h4 :class="{ 'is-required': !isModeView }">截止时间</h4>
                  <b v-if="taskForm.endTime">{{ taskForm.endTime | filterDate }}</b>
                  <span v-else>请选择结束时间</span>
                </div>
              </div>
            </el-form-item>
          </div>
          <!--3-->
          <div class="dt-form-tabs">
            <el-tabs v-model="formActiveName">
              <el-tab-pane label="任务信息" name="0">
                <div class="dt-form-group">
                  <el-form-item label="所属专业" prop="majorId" class="dt-form-item-sszy" v-if="isModeView">
                    <span class="dt-form-view-text">{{ majorName }}</span> </el-form-item
                  ><!--view-->
                  <el-form-item label="所属专业" prop="majorId" class="dt-form-item-sszy" v-else>
                    <el-col :span="13" class="mr10">
                      <el-select v-model="taskForm.majorId" placeholder="请选择专业" size="medium" @change="changeMajorId" :disabled="isReadonly">
                        <el-option v-for="major in majorList" :key="major.id" :label="major.projectName" :value="major.id"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10"><el-button type="text" @click="goEditOrg" size="medium">添加专业</el-button></el-col> </el-form-item
                  ><!--create/edit-->
                  <el-form-item label="任务产值" prop="output" class="dt-form-item-rwcz" v-if="isModeView">
                    <span class="dt-form-view-text">{{ $tools.moneyLower(taskForm.output) }}元</span> </el-form-item
                  ><!--view-->
                  <el-form-item label="任务产值" prop="output" class="dt-form-item-rwcz" v-else>
                    <el-col :span="13" class="mr10">
                      <el-input
                        placeholder="请输入产值"
                        @change="changeOutput"
                        v-model="taskForm.output"
                        size="medium"
                        @input="outputInput"
                        :disabled="isReadonly"
                        :maxlength="10"
                      >
                        <template slot="append">元</template>
                      </el-input>
                      <div v-if="taskForm.output" class="dt-je-china poa">{{ $tools.moneyLower(taskForm.output) }}</div>
                    </el-col>
                    <el-col class="dt-res-output" :span="10" :title="'剩余可分配产值' + $tools.moneyLower(residueOutput) + '元'"
                      >剩余可分配产值{{ $tools.moneyLower(residueOutput) }}元</el-col
                    > </el-form-item
                  ><!--create/edit-->
                  <el-form-item label="项目节点" class="dt-form-item-xmjd" prop="nodeId" v-if="isModeView">
                    <span class="dt-form-view-text">{{ rootProjectName + '-' + nodeName }}</span> </el-form-item
                  ><!--view-->
                  <el-form-item label="项目节点" class="dt-form-item-xmjd" prop="nodeId" v-else>
                    <el-col :span="13" class="mr10">
                      <el-select v-model="rootProjectId" size="medium" :disabled="true">
                        <el-option :label="rootProjectName" :value="rootProjectId"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10" style="width: 258px">
                      <el-select v-model="taskForm.nodeId" placeholder="请选择项目节点" size="medium" :disabled="true">
                        <el-option v-for="node in nodeList" :label="node.nodeName" :value="node.id" :key="node.id"></el-option>
                      </el-select>
                    </el-col> </el-form-item
                  ><!--create/edit-->
                  <el-form-item
                    label="任务描述"
                    prop="desription"
                    class="dt-form-item-rwms"
                    v-if="!isModeView || (isModeView && taskForm.desription)"
                  >
                    <div v-if="isModeView">
                      <p class="dt-form-view-text dt-form-view-multext" v-for="item in taskForm.desription.split('\n')" :key="item">{{ item }}</p>
                    </div>
                    <el-input
                      v-else
                      type="textarea"
                      v-model="taskForm.desription"
                      size="medium"
                      :disabled="isReadonly"
                      maxlength="200"
                      show-word-limit
                      :rows="5"
                      @change="editTask({ desription: taskForm.desription })"
                      @focus="focusTextarea(0)"
                      @blur="blurTextarea(0)"
                      :class="{ 'is-focus': textareaFocus[0] }"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="是否审批" prop="isAudit" class="dt-form-item-sfsp" v-if="!isModeView">
                    <el-radio-group v-model="taskForm.isAudit" @input="changeIsAudit" :disabled="isReadonly">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="审批类型" prop="auditType" class="dt-form-item-splx" v-show="taskForm.isAudit === '1'">
                    <span class="dt-form-view-text" v-if="isModeView">{{ auditTypeName }}</span>
                    <el-select
                      v-model="taskForm.auditType"
                      placeholder="请选择审批类型"
                      size="medium"
                      @change="changeAuditType"
                      v-else
                      :disabled="isReadonly"
                    >
                      <el-option label="审图" value="1"></el-option>
                      <el-option label="进度" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="审批流程"
                    prop="auditProcess"
                    class="dt-form-item-splc"
                    v-show="taskForm.isAudit === '1' && taskForm.auditType === '1'"
                  >
                    <div class="dt-item-splc">
                      <span v-if="!isModeView">可在以下三个环节中自定义选择，至少要有一个审批环节</span>
                      <div class="dt-splc-list">
                        <div class="dt-splc-item" v-show="!isModeView || taskForm.jdUid">
                          <PublicSelectHeader
                            :readonly="isReadonly"
                            :option="optHeaderMaster1"
                            @select="selectUser($event, '1')"
                            ref="headerMaster1"
                          />
                          <span>校对</span>
                        </div>
                        <div class="dt-splc-line" v-show="!isModeView || (taskForm.jdUid && taskForm.shUid)"></div>
                        <div class="dt-splc-item" v-show="!isModeView || taskForm.shUid">
                          <PublicSelectHeader
                            :readonly="isReadonly"
                            :option="optHeaderMaster2"
                            @select="selectUser($event, '2')"
                            ref="headerMaster2"
                          />
                          <span>审核</span>
                        </div>
                        <div class="dt-splc-line" v-show="!isModeView || (taskForm.shUid && taskForm.sdUid)"></div>
                        <div class="dt-splc-item" v-show="!isModeView || taskForm.sdUid">
                          <PublicSelectHeader
                            :readonly="isReadonly"
                            :option="optHeaderMaster3"
                            @select="selectUser($event, '3')"
                            ref="headerMaster3"
                          />
                          <span>审定</span>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item
                    label="审批人"
                    prop="auditUid"
                    class="dt-form-item-splc"
                    v-show="taskForm.isAudit === '1' && taskForm.auditType === '2'"
                  >
                    <div class="dt-item-splc">
                      <div class="dt-splc-list">
                        <div class="dt-splc-item">
                          <PublicSelectHeader :readonly="true" :option="optHeaderMaster4" ref="headerMaster4" />
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item class="dt-form-item-file" label="附件">
                    <div class="dt-file-uplpad" v-if="!isReadonly">
                      <el-upload
                        action="#"
                        :http-request="httpRequest"
                        :show-file-list="false"
                        :on-change="handleChange"
                        :limit="5"
                        :before-upload="beforeAvatarUpload"
                        :on-exceed="handleExceed"
                        :file-list="this.taskForm.taskAnnex"
                      >
                        <div slot="tip" class="el-upload__tip">单个文件小于20M，最多可以上传5个附件</div>
                        <el-button slot="trigger" size="small" icon="el-icon-upload2">添加附件</el-button>
                      </el-upload>
                    </div>
                  </el-form-item>
                  <div class="dt-file-list">
                    <p v-if="this.taskForm.taskAnnex.length == 0">暂无内容</p>
                    <div v-for="item in this.taskForm.taskAnnex" :key="item.uid">
                      <div class="dt-content-approval-achievement">
                        <span v-if="item.isCanReName" class="dt-content-approval-filename" :title="item.name"
                          ><i class="el-icon-document"></i>{{ item.name }}</span
                        >
                        <span v-else class="dt-content-approval-filename">
                          <el-input v-model="item.newFileName" placeholder="请输入文件名" size="mini" maxlength="40"></el-input>
                        </span>
                        <span :class="{ 'dt-content-approval-username': true, 'is-view': isModeView }">{{ item.userName || '--' }}</span>
                        <span class="dt-content-approval-time" v-if="isModeView">{{ item.createTime | filterDate }}</span>
                        <span :class="{ 'dt-content-approval-btn': true, 'is-view': isModeView }" v-if="item.isCanReName">
                          <el-button type="text" size="mini" @click="downLoad(item)">下载</el-button>
                          <el-button type="text" size="mini" @click="reName(item)" v-if="!isReadonly">重命名</el-button>
                          <el-button type="text" size="mini" @click="handleRemove(item)" v-if="!isReadonly">删除</el-button>
                        </span>
                        <span class="dt-content-approval-btn" v-if="!item.isCanReName">
                          <el-button type="text" size="mini" @click="sureReName(item)">确定</el-button>
                          <el-button type="text" size="mini" @click="reName(item)">取消</el-button>
                        </span>
                      </div>
                      <div class="dt-file-progress">
                        <el-progress v-if="item.percentage !== 100" :percentage="item.percentage" :stroke-width="2"></el-progress>
                      </div>
                    </div>
                  </div>
                </div>
                <!--任务信息-->
              </el-tab-pane>
              <el-tab-pane label="校对" name="1" v-if="isModeView && jdList.length">
                <div class="dt-st-list">
                  <div class="dt-st-list-item" v-for="(item, index) in jdList" :key="index">
                    <div class="dt-item-title" v-if="index % 2 === 0">
                      <span><i class="el-icon-receiving"></i>第{{ index / 2 + 1 }}次提交</span>
                      <span
                        ><b>{{ item.submitName }}</b
                        ><em>提交于{{ item.submitTime }}</em></span
                      >
                    </div>
                    <div class="dt-item-box-list" v-if="index % 2 === 0">
                      <div class="dt-item-box-listitem" v-for="fileItem in item.taskResult" :key="fileItem.id">
                        <div class="dt-item-box-list-data"><i class="el-icon-document"></i>{{ fileItem.fileName }}</div>
                        <div class="dt-item-box-list-name">{{ fileItem.userName }}</div>
                        <div class="dt-item-box-list-time">{{ fileItem.createTime }}</div>
                        <div class="dt-item-box-list-btn"><el-button type="text" size="mini" @click="downLoad(fileItem)">下载</el-button></div>
                      </div>
                    </div>
                    <div class="dt-item-box-wait" v-if="index % 2 === 0 && index === jdList.length - 1">
                      <span>等待审批...</span>
                    </div>
                    <div class="dt-item-box-opinion" v-if="index % 2 === 1">
                      <div class="dt-box-opi-title">
                        <span>校对{{ item.logState | filterLogState }}</span>
                        <span
                          ><b>{{ item.submitName }}</b
                          ><em>提交于{{ item.submitTime }}</em></span
                        >
                      </div>
                      <div class="dt-box-opi-box">
                        <div class="dt-box-opi-box-log">
                          <span>校对意见：</span>
                          <span>{{ item.remark || '--' }}</span>
                        </div>
                        <div class="dt-box-opi-box-file">
                          <span>校对附件：</span>
                          <div class="dt-box-opi-box-filelist" v-if="item.auditFile.length">
                            <p v-for="fileitem in item.auditFile" :key="fileitem.id">
                              <i class="el-icon-document"></i><span>{{ fileitem.fileName }}</span>
                              <el-button type="text" size="mini" @click="downLoad(fileitem)">下载</el-button>
                            </p>
                          </div>
                          <span v-else>--</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div> </el-tab-pane
              ><!--校对-->
              <el-tab-pane label="审核" name="2" v-if="isModeView && shList.length">
                <div class="dt-st-list">
                  <div class="dt-st-list-item" v-for="(item, index) in shList" :key="index">
                    <div class="dt-item-title" v-if="index % 2 === 0">
                      <span><i class="el-icon-receiving"></i>第{{ index / 2 + 1 }}次提交</span>
                      <span
                        ><b>{{ item.submitName }}</b
                        ><em>提交于{{ item.submitTime }}</em></span
                      >
                    </div>
                    <div class="dt-item-box-list" v-if="index % 2 === 0">
                      <div class="dt-item-box-listitem" v-for="fileItem in item.taskResult" :key="fileItem.id">
                        <div class="dt-item-box-list-data"><i class="el-icon-document"></i>{{ fileItem.fileName }}</div>
                        <div class="dt-item-box-list-name">{{ fileItem.userName }}</div>
                        <div class="dt-item-box-list-time">{{ fileItem.createTime }}</div>
                        <div class="dt-item-box-list-btn"><el-button type="text" size="mini" @click="downLoad(fileItem)">下载</el-button></div>
                      </div>
                    </div>
                    <div class="dt-item-box-wait" v-if="index % 2 === 0 && index === shList.length - 1">
                      <span>等待审批...</span>
                    </div>
                    <div class="dt-item-box-opinion" v-if="index % 2 === 1">
                      <div class="dt-box-opi-title">
                        <span>校对{{ item.logState | filterLogState }}</span>
                        <span
                          ><b>{{ item.submitName }}</b
                          ><em>提交于{{ item.submitTime }}</em></span
                        >
                      </div>
                      <div class="dt-box-opi-box">
                        <div class="dt-box-opi-box-log">
                          <span>校对意见：</span>
                          <span>{{ item.remark || '--' }}</span>
                        </div>
                        <div class="dt-box-opi-box-file">
                          <span>校对附件：</span>
                          <div class="dt-box-opi-box-filelist" v-if="item.auditFile.length">
                            <p v-for="fileitem in item.auditFile" :key="fileitem.id">
                              <i class="el-icon-document"></i><span>{{ fileitem.fileName }}</span>
                              <el-button type="text" size="mini" @click="downLoad(fileitem)">下载</el-button>
                            </p>
                          </div>
                          <span v-else>--</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div> </el-tab-pane
              ><!--审核-->
              <el-tab-pane label="审定" name="3" v-if="isModeView && sdList.length">
                <div class="dt-st-list">
                  <div class="dt-st-list-item" v-for="(item, index) in sdList" :key="index">
                    <div class="dt-item-title" v-if="index % 2 === 0">
                      <span><i class="el-icon-receiving"></i>第{{ index / 2 + 1 }}次提交</span>
                      <span
                        ><b>{{ item.submitName }}</b
                        ><em>提交于{{ item.submitTime }}</em></span
                      >
                    </div>
                    <div class="dt-item-box-list" v-if="index % 2 === 0">
                      <div class="dt-item-box-listitem" v-for="fileItem in item.taskResult" :key="fileItem.id">
                        <div class="dt-item-box-list-data"><i class="el-icon-document"></i>{{ fileItem.fileName }}</div>
                        <div class="dt-item-box-list-name">{{ fileItem.userName }}</div>
                        <div class="dt-item-box-list-time">{{ fileItem.createTime }}</div>
                        <div class="dt-item-box-list-btn"><el-button type="text" size="mini" @click="downLoad(fileItem)">下载</el-button></div>
                      </div>
                    </div>
                    <div class="dt-item-box-wait" v-if="index % 2 === 0 && index === sdList.length - 1">
                      <span>等待审批...</span>
                    </div>
                    <div class="dt-item-box-opinion" v-if="index % 2 === 1">
                      <div class="dt-box-opi-title">
                        <span>校对{{ item.logState | filterLogState }}</span>
                        <span
                          ><b>{{ item.submitName }}</b
                          ><em>提交于{{ item.submitTime }}</em></span
                        >
                      </div>
                      <div class="dt-box-opi-box">
                        <div class="dt-box-opi-box-log">
                          <span>校对意见：</span>
                          <span>{{ item.remark || '--' }}</span>
                        </div>
                        <div class="dt-box-opi-box-file">
                          <span>校对附件：</span>
                          <div class="dt-box-opi-box-filelist" v-if="item.auditFile.length">
                            <p v-for="fileitem in item.auditFile" :key="fileitem.id">
                              <i class="el-icon-document"></i><span>{{ fileitem.fileName }}</span>
                              <el-button type="text" size="mini" @click="downLoad(fileitem)">下载</el-button>
                            </p>
                          </div>
                          <span v-else>--</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div> </el-tab-pane
              ><!--审定-->
            </el-tabs>
          </div>
          <div class="dt-form-bot">
            <div class="dt-form-bot-record" v-if="!isModeCreate && taskChangeLogList.length">
              <span>{{
                taskChangeLogList[taskChangeLogList.length - 1].createName + ' 创建于 ' + taskChangeLogList[taskChangeLogList.length - 1].createTime
              }}</span>
              <em v-if="taskChangeLogList.length > 1">|</em>
              <span v-if="taskChangeLogList.length > 1">{{ taskChangeLogList[0].createName + ' 更新于 ' + taskChangeLogList[0].createTime }}</span>
            </div>
            <div class="dt-form-bot-btn">
              <el-button type="primary" @click="submitForm" size="medium" v-if="isModeCreate" :loading="loading.submit">创建任务</el-button>
              <el-button
                type="primary"
                @click="submitForm"
                size="medium"
                v-if="isModeView && isShowButton && isModeViewBtn"
                :disabled="buttonState === 4 || buttonState === 6 || buttonState === 8"
                :loading="loading.submit"
                >{{ buttonStateList[buttonState] }}</el-button
              >
            </div>
          </div>
        </el-form>
      </div>
      <div class="dt-card-record">
        <el-tabs v-model="recordActiveName">
          <el-tab-pane label="变更记录" name="0">
            <div class="dt-record-list">
              <el-timeline v-if="taskChangeLogList.length">
                <el-timeline-item color="#E1E6F0" v-for="(item, index) in taskChangeLogList" :key="item.id">
                  <!-- 使用默认插槽来自定义整个时间线条目 -->
                  <template v-slot:default>
                    <div class="dt-content-progress-right-approval-title">
                      <p>{{ item.changeContent }}</p>
                      <p>
                        {{ item.createName }} <em>变更于 {{ item.createTime }}</em>
                      </p>
                    </div>
                    <el-card shadow="never" v-if="index !== taskChangeLogList.length - 1">
                      <p>变更前：{{ item.beforeChange || '--' }}</p>
                      <p>变更后：{{ item.afterChange || '--' }}</p>
                    </el-card>
                  </template>
                </el-timeline-item>
              </el-timeline>
              <div class="dt-record-null" v-else>暂无记录</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="审批记录" name="1">
            <div class="dt-record-list">
              <el-timeline v-if="taskAuditLogList.length">
                <el-timeline-item v-for="item in taskAuditLogList" :color="timelineColor[item.auditState]" :key="item.id">
                  <!-- 使用默认插槽来自定义整个时间线条目 -->
                  <template v-slot:default>
                    <div class="dt-content-progress-right-approval-title">
                      <p>{{ item.title }}</p>
                      <p>
                        {{ item.userName }} <em>提交于 {{ item.createTime }}</em>
                      </p>
                    </div>
                    <template v-if="item.auditType === null"
                      ><!--非审批任务-->
                      <el-card shadow="never" v-if="item.delayReason">
                        <p v-if="item.delayReason">延期原因：{{ item.delayReason }}</p>
                      </el-card>
                    </template>
                    <template v-else
                      ><!--审批任务-->
                      <el-card shadow="never" v-if="(item.delayReason || item.auditType === 0) && item.auditState === 1">
                        <p v-if="item.delayReason && item.auditState === 1">延期原因：{{ item.delayReason }}</p>
                        <p v-if="item.auditType === 0 && item.auditState === 1">当前进度：{{ item.currentProgress }}%</p>
                        <p v-if="item.auditType === 0 && item.auditState === 1">提交进度：{{ item.submitProgress }}%</p>
                      </el-card>
                    </template>
                  </template>
                </el-timeline-item>
              </el-timeline>
              <div class="dt-record-null" v-else>暂无记录</div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- <el-dialog title="" :visible.sync="isShowImage" :append-to-body="true" :before-close="closeShow">
      <el-image :src="imgSrc" fit="fill" v-if="imgSrc"></el-image>
      <iframe v-if="fileSrc" :src="`https://view.officeapps.live.com/op/view.aspx?src=${fileSrc}`" width="100%" height="800px"
        frameBorder="0"></iframe>
    </el-dialog> -->
    <PublicApprovalCard
      ref="approvalCard"
      :rootProjectId="rootProjectId + ''"
      :taskId="taskId + ''"
      :auditType="taskForm.auditType"
      @updataList="updataList"
    /><!--审批操作-->
    <el-dialog
      custom-class="dt-send-task"
      title=""
      :visible.sync="isShowSendDialog"
      :append-to-body="true"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="dt-st-main">
        <div class="dt-st-left">
          <h2 :title="rootProjectName">{{ rootProjectName }}</h2>
          <div class="dt-st-group">
            <div class="dt-group-item" v-for="item in groupList" :key="item.groupId">
              <el-checkbox v-model="item.checked"></el-checkbox>
              <img src="/skb/img/chat-mess.png" alt="" />
              <span>{{ item.groupName }}</span>
            </div>
          </div>
        </div>
        <div class="dt-st-right">
          <h4>发送给</h4>
          <div class="dt-st-group">
            <div class="dt-group-item" v-for="item in selectGroupList" :key="item.groupId">
              <img src="/skb/img/chat-mess.png" alt="" />
              <span>{{ item.groupName }}</span>
              <i class="el-icon-delete" @click="item.checked = false"></i>
            </div>
          </div>
          <div class="dt-st-form">
            <el-popover placement="right" title="" width="200" trigger="click" :content="taskForm.taskName">
              <div class="dt-form-title" slot="reference">
                <span>[任务]{{ taskForm.taskName }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </el-popover>

            <div class="dt-form-textarea">
              <el-input type="textarea" placeholder="请输入内容" v-model="textareaGroup" maxlength="500" show-word-limit> </el-input>
            </div>
          </div>
          <div class="dt-st-line"></div>
          <div class="dt-st-btn">
            <el-button type="primary" size="medium" @click="sendTask" :disabled="!selectGroupList.length" :loading="loading.sendTask"
              >发送{{ selectGroupList.length ? '（' + selectGroupList.length + '）' : '' }}</el-button
            >
            <el-button size="medium" @click="quitSendTask">取消</el-button>
          </div>
        </div>
      </div> </el-dialog
    ><!--发送任务-->
    <PublicDelayDialog
      ref="delayDialog"
      :taskId="taskId + ''"
      :IsShowFormDelay="IsShowFormDelay"
      :delayDay="remainDays"
      @closeFormDelay="closeFormDelay"
      @updataList="updataList"
    /><!--延期的时候完成任务-->
  </el-dialog>
</template>
<script>
export default {
  head() {
    return {
      script: [
        {
          type: 'text/javascript',
          src: 'https://www.ccccdt.com/skb/js/oos-sdk-6.0.min.js',
          body: false
        }
      ]
    }
  },
  props: ['option'],
  data() {
    return {
      loading: { submit: false, sendTask: false }, //提交按钮
      currStep: -1,
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      uname: this.$store.state.uname,
      rootProjectId: '',
      rootProjectName: '',
      nodeStartTime: '', //节点开始时间 限制时间控件
      nodeEndTime: '', //节点结束时间 限制时间控件
      createUid: '', //创建人id
      taskState: '', //内部任务状态
      demandState: '', //外部任务状态
      projectState: '', //项目状态
      remainDays: 0, //延期天数
      IsShowFormDelay: false, //显示延迟弹窗
      /**************/
      formActiveName: '0',
      recordActiveName: '0',
      dialogVisible: false,
      taskNo: '内部任务',
      taskNoList: [null, '内部任务', '外部任务', '创客任务'],
      residueOutput: '0', //剩余产值
      ori_output: '', //原始产值 展示用
      taskForm: {
        taskName: '',
        masterUid: '',
        startTime: '',
        endTime: '',
        output: '',
        majorId: '',
        nodeId: '',
        desription: '',
        isAudit: '', //1、是 2、否
        auditType: '', //1、审图 2、进度
        auditProcess: '', //自定义字段 验证jduid、shuid、sduid
        jdUid: '',
        shUid: '',
        sdUid: '',
        auditUid: '',
        taskAnnex: []
      },
      taskRules: {
        taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        masterUid: [{ required: true, message: '请选择负责人', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择日期', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
        majorId: [{ required: true, message: '请选择专业', trigger: 'change' }],
        output: [
          { required: true, message: '请输入任务产值', trigger: 'blur' },
          { validator: this.validateOutput, trigger: 'blur' }
          // { pattern: /^(([1-9]\d{0,8}(\.\d{1,2})?)|(0\.\d{1,2}))$/, message: '请输入正确的任务产值', trigger: 'blur' }
        ],
        nodeId: [{ required: true, message: '请选择节点', trigger: 'change' }],
        isAudit: [{ required: true }],
        auditType: [{ required: true, message: '请选择审批类型', trigger: 'change' }],
        auditProcess: [{ required: true, message: '请至少选择一个审批环节' }],
        auditUid: [{ required: true }]
      },
      //日期配置
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.taskForm.endTime) {
            return (
              time.getTime() < new Date(this.limitStartTime).getTime() ||
              time.getTime() > new Date(this.limitEndTime).getTime() ||
              time.getTime() > new Date(this.taskForm.endTime)
            )
          } else {
            return time.getTime() < new Date(this.limitStartTime).getTime() || time.getTime() > new Date(this.limitEndTime).getTime()
          }
        }
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.taskForm.startTime) {
            return (
              time.getTime() < new Date(this.limitStartTime).getTime() ||
              time.getTime() > new Date(this.limitEndTime).getTime() ||
              time.getTime() < new Date(this.taskForm.startTime)
            )
          } else {
            return time.getTime() < new Date(this.limitStartTime).getTime() || time.getTime() > new Date(this.limitEndTime).getTime()
          }
        }
      },
      //节点列表
      nodeList: [],
      //专业列表
      majorList: [],
      //项目成员列表
      projectUserList: [],
      //负责人单选 选人配置
      optHeaderMaster0: {
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        projectUserList: []
      },
      optHeaderMaster1: {
        isTop: true, //是否向上弹出 可选
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        projectUserList: []
      },
      optHeaderMaster2: {
        isTop: true, //是否向上弹出 可选
        boxLeft: '-80px', //box left
        iconLeft: '92px', //icon left
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        projectUserList: []
      },
      optHeaderMaster3: {
        isTop: true, //是否向上弹出 可选
        boxLeft: '-156px', //box left
        iconLeft: '168px', //icon left
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        projectUserList: []
      },
      optHeaderMaster4: {
        isTop: true,
        //已选的成员列表
        selectedUserList: [],
        //团队成员列表
        projectUserList: []
      },
      imgSrc: '',
      isShowImage: false,
      fileSrc: '',
      newFileName: '',
      //变更记录
      taskChangeLogList: [],
      //审批记录
      taskAuditLogList: [],
      jdList: [],
      shList: [],
      sdList: [],
      //textarea 模拟focus
      textareaFocus: [false],
      /*********************************view*****************************************/
      buttonStateList: [
        '',
        '认领任务',
        '完成任务',
        '提交进度',
        '提交进度',
        '发起校对',
        '发起校对',
        '发起审核',
        '发起审核',
        '发起审定',
        '发起审定',
        '任务已完成'
      ],
      buttonState: 0,
      showButton: 0,
      timelineColor: [null, '#E1E6F0', '#52C41A', '#F5222D'],
      /*******************转发任务****************************/
      isShowSendDialog: false,
      textareaGroup: '',
      groupList: []
    }
  },
  filters: {
    filterLogState(val) {
      return val === 2 ? '通过' : '驳回'
    },
    filterDate(val) {
      return val.substring(0, 10)
    }
  },
  computed: {
    //查询
    query() {
      return this.$tools.getQuery(this)
    },
    //创建模式
    isModeCreate() {
      return this.option.mode === 'create'
    },
    //编辑模式
    isModeEdit() {
      return this.option.mode === 'edit'
    },
    //查看模式
    isModeView() {
      return this.option.mode === 'view'
    },
    isModeViewBtn() {
      //1-10
      return this.buttonState > 0 && this.buttonState < 11
    },
    isShowButton() {
      return this.showButton === 1
    },
    taskId() {
      return this.option.taskId || ''
    },
    //是否能激活/关闭订单
    isChangeTask() {
      return this.uid == this.createUid && (this.taskState === 1 || this.taskState === 8)
    },
    //任务状态class
    dtIconState() {
      var state = '',
        num = '',
        text = ''
      if (this.taskState) {
        //内部任务
        state = this.taskState
        switch (state) {
          case 1:
            num = 1
            text = '待认领'
            break
          case 2:
            num = 2
            text = '进行中'
            break
          case 3:
            num = 3
            text = '审批中'
            break
          case 4:
            num = 3
            text = '校对中'
            break
          case 5:
            num = 3
            text = '审核中'
            break
          case 6:
            num = 3
            text = '审定中'
            break
          case 7:
            num = 5
            text = '已完成'
            break
          case 8:
            num = 4
            text = '已关闭'
            break
        }
      } else {
        //外部任务
        state = this.demandState
        switch (state) {
          case 11:
            num = 2
            text = '招标中'
            break
          case 12:
            num = 2
            text = '进行中'
            break
          case 13:
            num = 2
            text = '验收中'
            break
          case 14:
            num = 5
            text = '待评价'
            break
          case 15:
            num = 5
            text = '已完成'
            break
          case 16:
            num = 3
            text = '申请关闭需求'
            break
          case 17:
            num = 4
            text = '已关闭'
            break
          case 18:
            num = 3
            text = '申请需求变更'
            break
          case 19:
            num = 3
            text = '审核中'
            break
          case 20:
            num = 1
            text = '待发布'
            break
          case 21:
            num = 2
            text = '竞赛中'
            break
        }
      }
      return { class: 'dt-icon-state-' + num, text: text }
    },
    //负责人名字
    masterUserName() {
      var master = this.projectUserList.filter((item) => {
        return item.userId == this.taskForm.masterUid
      })[0]
      return master ? master.realName : ''
    },
    //限制开始日期
    limitStartTime() {
      return (this.option.startTime || this.nodeStartTime).substring(0, 10) + ' 00:00:00'
    },
    //限制结束日期
    limitEndTime() {
      return (this.option.endTime || this.nodeEndTime).substring(0, 10) + ' 23:59:59'
    },
    /*********************view****************************************/
    //专业名称
    majorName() {
      var major = this.majorList.filter((item) => {
        return item.id == this.taskForm.majorId
      })[0]
      return major ? major.projectName : ''
    },
    //节点名称
    nodeName() {
      var node = this.nodeList.filter((item) => {
        return item.id == this.taskForm.nodeId
      })[0]
      return node ? node.nodeName : ''
    },
    auditType() {
      return this.taskForm.auditType
    },
    //审批类型名字
    auditTypeName() {
      var auditType = [null, '审图', '进度']
      return auditType[this.taskForm.auditType]
    },
    //只读模式
    isReadonly() {
      return this.isModeView || (this.isModeEdit && this.taskState !== 1)
    },
    //操作来源, [null,pm...]
    source() {
      return this.option.source
    },
    //已选中的转发群
    selectGroupList() {
      return this.groupList.filter((item) => {
        return item.checked === true
      })
    }
  },
  methods: {
    //获取专业剩余产值
    getRresidueOutput() {
      var isExistItem = this.majorList.filter((item) => {
        return item.id === this.taskForm.majorId
      })
      if (isExistItem[0]) {
        this.residueOutput = isExistItem[0].residueOutput + this.ori_output
      } else {
        this.residueOutput = '0'
      }
    },
    //blur验证产值
    validateOutput(rule, value, callback) {
      var reg = /^(([1-9]\d{0,8}(\.\d{1,2})?)|(0\.\d{1,2})|(0))$/
      if (!reg.test(this.taskForm.output)) {
        callback(new Error('请输入正确的产值'))
      } else {
        var output = parseFloat(this.taskForm.output),
          residueOutput = parseFloat(this.residueOutput)

        if (output > residueOutput) {
          callback(new Error('请输入剩余可分配产值以内的数字'))
        } else {
          callback()
        }
      }
    },
    //输入验证
    outputInput(value) {
      let that = this
      let regStrs = [
        ['^0(\\d+)$', '$1'],
        ['[^\\d\\.]+$', ''],
        ['\\.(\\d?)\\.+', '.$1'],
        ['^(\\d+\\.\\d{2}).+', '$1']
      ]
      for (let i = 0; i < regStrs.length; i++) {
        let reg = new RegExp(regStrs[i][0])
        that.taskForm.output = that.taskForm.output.replace(reg, regStrs[i][1])
      }
    },
    //打开任务卡片
    resetData() {
      this.dialogVisible = true
      this.rootProjectId = this.option.rootProjectId
      this.rootProjectName = this.option.rootProjectName
      this.taskForm.nodeId = this.option.nodeId
      this.taskState = 1
      this.remainDays = 0
      this.getNodeList() //节点列表
      this.getProjectUserList() //选人列表
      this.getGroupList() //获取群列表

      if (this.isModeCreate) {
        //创建 需初始化以下字段
        this.taskForm.startTime = this.option.startTime
        this.taskForm.endTime = this.option.endTime
        this.taskForm.output = ''
        this.taskForm.isAudit = '0' //1、是 0、否
        this.taskForm.auditType = '1'
        this.taskForm.auditProcess = 'ok'
        this.taskForm.auditUid = this.uid
      } else {
        var timer = setInterval(() => {
          //确保先有 getProjectUserList
          if (this.projectUserList.length) {
            clearInterval(timer)
            //编辑/查看 获取任务详情
            setTimeout(() => {
              this.getTaskDetail()
            }, 100)
          }
        }, 50)
      }
    },
    //关闭后form重置为空
    resetForm() {
      this.taskNo = '内部任务'
      this.ori_output = '' //原始产值
      this.residueOutput = '0' //剩余可分配产值
      this.recordActiveName = '0'
      this.taskForm.taskName = ''
      this.taskForm.masterUid = ''
      this.taskForm.startTime = ''
      this.taskForm.endTime = ''
      this.taskForm.output = '0'
      this.taskForm.majorId = ''
      this.taskForm.nodeId = ''
      this.taskForm.desription = ''
      this.taskForm.isAudit = '0' //1、是 0、否
      this.taskForm.auditType = '1'
      this.taskForm.auditProcess = 'ok' //自定义字段 验证jduid、shuid、sduid
      this.taskForm.jdUid = ''
      this.taskForm.shUid = ''
      this.taskForm.sdUid = ''
      this.taskForm.auditUid = this.uid
      this.taskForm.taskAnnex = []
      this.taskChangeLogList = []
      this.taskAuditLogList = []

      this.optHeaderMaster0.selectedUserList = []
      this.optHeaderMaster1.selectedUserList = []
      this.optHeaderMaster2.selectedUserList = []
      this.optHeaderMaster3.selectedUserList = []
      this.optHeaderMaster4.selectedUserList = []

      this.majorList = []
      setTimeout(() => {
        this.$refs['taskForm'].clearValidate()
      }, 100)
    },
    //获取任务详情
    getTaskDetail() {
      var data = [{ userId: this.uid, taskId: this.taskId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/taskDetail'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.taskNo = this.taskNoList[data.data.taskType] + '-' + data.data.taskNo
              this.nodeStartTime = data.data.nodeStartTime
              this.nodeEndTime = data.data.nodeEndTime
              this.createUid = data.data.createUid
              this.taskState = data.data.taskState
              this.remainDays = data.data.remainDays
              this.demandState = data.data.demandState
              this.buttonState = data.data.buttonState
              this.showButton = data.data.showButton
              this.jdList = data.data.jdList
              this.shList = data.data.shList
              this.sdList = data.data.sdList
              this.ori_output = data.data.output

              this.taskForm.taskName = data.data.taskName
              this.taskForm.masterUid = data.data.masterUid
              this.taskForm.startTime = data.data.startTime
              this.taskForm.endTime = data.data.endTime.substring(0, 10) + ' 00:00:00' //设置一下格式 避免触发时间选择器同一天的change事件
              this.taskForm.output = data.data.output
              this.taskForm.majorId = data.data.majorId || ''
              this.taskForm.nodeId = data.data.nodeId
              this.taskForm.desription = data.data.desription
              this.taskForm.isAudit = data.data.isAudit + '' //1、是 0、否
              this.taskForm.auditType = data.data.auditType ? data.data.auditType + '' : '1' //1、审图 2、进度
              this.taskForm.auditProcess = data.data.jdUid || data.data.shUid || data.data.sdUid ? 'ok' : '' //自定义字段 验证jduid、shuid、sduid
              this.taskForm.jdUid = data.data.jdUid ? data.data.jdUid + '' : ''
              this.taskForm.shUid = data.data.shUid ? data.data.shUid + '' : ''
              this.taskForm.sdUid = data.data.sdUid ? data.data.sdUid + '' : ''
              this.taskForm.auditUid = data.data.auditUid ? data.data.auditUid + '' : ''

              data.data.taskAnnexList.map((item) => {
                item.isCanReName = true
                item.newFileName = ''
                item.name = item.fileName
                item.url = item.fileUrl
                item.percentage = 100
              })
              this.taskForm.taskAnnex = data.data.taskAnnexList

              this.optHeaderMaster0.selectedUserList = this.projectUserList.filter((item) => {
                return item.userId === data.data.masterUid
              })
              this.optHeaderMaster1.selectedUserList = this.projectUserList.filter((item) => {
                return item.userId === data.data.jdUid
              })
              this.optHeaderMaster2.selectedUserList = this.projectUserList.filter((item) => {
                return item.userId === data.data.shUid
              })
              this.optHeaderMaster3.selectedUserList = this.projectUserList.filter((item) => {
                return item.userId === data.data.sdUid
              })
              this.optHeaderMaster4.selectedUserList = this.projectUserList.filter((item) => {
                return item.userId === data.data.auditUid
              })

              if (data.data.taskType === 1) {
                //内部订单 直接调用
                this.getMajor()
              } else {
                //外部订单、创客订单 待发布 招标中不能调用
                if (data.data.demandState !== 11 && data.data.demandState !== 20) {
                  this.getMajor()
                }
              }
              this.taskChangeLogList = data.data.taskChangeLogList
              this.taskAuditLogList = data.data.taskAuditLogList
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    toogleTask(command) {
      if (command === '0') {
        this.closeTask()
      } else {
        this.restartTask()
      }
      this.refresh()
    },
    //树形结构转数组
    getTreeData(data) {
      var items = [],
        deepEach = function (data) {
          var item = {}
          for (var key in data) {
            if (key !== 'children') {
              item[key] = data[key]
            } else {
              if (data['children'].length) {
                deepEach(data['children'][0])
              }
            }
          }
          items.push(item)
        }
      if (data) {
        deepEach(data)
      }
      return items.reverse()
    },
    //获取节点列表
    getNodeList() {
      var data = [{ userId: this.uid, rootProjectId: this.rootProjectId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/node/projectNodeList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.nodeList = this.getTreeData(data.data.firstNode)
              this.projectState = data.data.projectState
            } else {
              this.nodeList = []
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    //获取项目用户列表
    getProjectUserList() {
      var data = [{ userId: this.uid, rootProjectId: this.rootProjectId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/projectUserList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.projectUserList = data.data
              this.optHeaderMaster0.projectUserList = data.data
              this.optHeaderMaster1.projectUserList = data.data
              this.optHeaderMaster2.projectUserList = data.data
              this.optHeaderMaster3.projectUserList = data.data
              this.optHeaderMaster4.projectUserList = data.data
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    //根据选人获取所属专业列表及剩余可分陪产值
    getMajor() {
      //是否初始化majorId
      var data = [{ userId: this.uid, rootProjectId: this.rootProjectId, taskMasterUid: this.taskForm.masterUid }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/project/majorSelector4Task'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (data.data.length) {
                this.majorList = data.data
              } else {
                this.taskForm.majorId = ''
                this.majorList = []
                if (this.isModeCreate) {
                  this.$message({
                    message: '当前用户没有专业，请先为用户设置专业',
                    type: 'warning',
                    duration: '2000',
                    onClose: () => {}
                  })
                }
              }
              //获取剩余产值
              this.getRresidueOutput()
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    showDatePicker(index) {
      if (this.mode !== 'view') {
        this.$refs['dataPicker' + index].focus()
      }
    },
    getAuditData(auditType) {
      var data = { isAudit: '1', auditType: auditType }
      if (auditType === '1') {
        //if (this.taskForm.jdUid) {
        data.jdUid = this.taskForm.jdUid
        // }
        // if (this.taskForm.shUid) {
        data.shUid = this.taskForm.shUid
        // }
        // if (this.taskForm.sdUid) {
        data.sdUid = this.taskForm.sdUid
        // }
      } else {
        data.auditUid = this.taskForm.auditUid
      }
      return data
    },
    //变更专业
    changeMajorId() {
      if (this.isModeCreate) {
        //创建的时候需要本地计算剩余产值
        this.getRresidueOutput()
      } else {
        this.editTask({ majorId: this.taskForm.majorId })
      }
    },
    //变更产值需要传入majorId
    changeOutput() {
      this.editTask({ majorId: this.taskForm.majorId, output: this.taskForm.output })
    },
    //更换是否审批
    changeIsAudit() {
      if (this.taskForm.isAudit === '1') {
        //是
        var isok = false
        this.taskForm.auditProcess = !!(this.taskForm.jdUid || this.taskForm.shUid || this.taskForm.sdUid) ? 'ok' : ''
        this.$refs['taskForm'].validateField(['auditType', 'auditProcess'], (error) => {
          if (!error) {
            isok = true
          } else {
            isok = false
          }
        })
        if (isok) {
          this.editTask(this.getAuditData(this.taskForm.auditType))
        }
      } else {
        //否
        this.taskForm.auditProcess = 'ok'
        this.$refs['taskForm'].validateField('auditProcess', (error) => {
          if (!error) {
            this.editTask({ isAudit: '0' })
          }
        })
      }
    },
    //更换审批类型
    changeAuditType() {
      if (this.taskForm.auditType === '1') {
        //审图
        this.taskForm.auditProcess = !!(this.taskForm.jdUid || this.taskForm.shUid || this.taskForm.sdUid) ? 'ok' : ''
        this.$refs['taskForm'].validateField('auditProcess', (error) => {
          if (!error) {
            this.editTask(this.getAuditData('1'))
          }
        })
      } else {
        //进度
        this.taskForm.auditProcess = 'ok'
        this.taskForm.auditUid = this.uid
        this.$refs['taskForm'].validateField('auditProcess', (error) => {
          if (!error) {
            this.editTask(this.getAuditData('2'))
          }
        })
        this.optHeaderMaster4.selectedUserList = this.projectUserList.filter((item) => {
          return item.userId + '' === this.uid
        })
        // this.$refs.headerMaster4.resetSelectUser()
      }
    },
    selectUser(ids, index) {
      if (index === '0') {
        this.taskForm.masterUid = ids
        //选人之后验证一下
        this.$refs['taskForm'].validateField('masterUid', (error) => {
          if (!error) {
            if (this.isModeCreate) {
              //创建模式 变更负责人，前台清空专业
              this.taskForm.majorId = ''
            } else {
              //编辑模式 变更负责人，后台清空专业
              this.editTask({ masterUid: this.taskForm.masterUid })
            }

            //更换负责人要重新获取专业
            this.getMajor()
          }
        })
      } else if (index === '1') {
        //选人之后验证一下
        this.taskForm.jdUid = ids
        this.taskForm.auditProcess = !!(this.taskForm.jdUid || this.taskForm.shUid || this.taskForm.sdUid) ? 'ok' : ''

        this.$refs['taskForm'].validateField('auditProcess', (error) => {
          if (!error) {
            this.editTask(this.getAuditData('1'))
          }
        })
      } else if (index === '2') {
        //选人之后验证一下
        this.taskForm.shUid = ids
        this.taskForm.auditProcess = !!(this.taskForm.jdUid || this.taskForm.shUid || this.taskForm.sdUid) ? 'ok' : ''
        this.$refs['taskForm'].validateField('auditProcess', (error) => {
          if (!error) {
            this.editTask(this.getAuditData('1'))
          }
        })
      } else if (index === '3') {
        //选人之后验证一下
        this.taskForm.sdUid = ids
        this.taskForm.auditProcess = !!(this.taskForm.jdUid || this.taskForm.shUid || this.taskForm.sdUid) ? 'ok' : ''
        this.$refs['taskForm'].validateField('auditProcess', (error) => {
          if (!error) {
            this.editTask(this.getAuditData('1'))
          }
        })
      }
    },
    //提交表单
    submitForm() {
      if (this.isModeCreate) {
        this.$refs['taskForm'].validate((valid) => {
          if (valid) {
            this.loading.submit = true
            this.createTask()
          }
        })
      } else if (this.isModeView) {
        if (this.buttonState === 1) {
          this.loading.submit = true
          this.takeTask()
        } else if (this.buttonState === 2) {
          if (this.remainDays >= 0) {
            this.$confirm('确定完成该任务吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.loading.submit = true
              this.completeTask()
            })
          } else {
            // this.dialogVisible = false
            // this.$root.$emit('showDelay', this.taskId, this.remainDays) //触发listcard页面的延迟弹窗事件
            this.IsShowFormDelay = true
          }
        } else if (this.buttonState === 3 || this.buttonState === 5 || this.buttonState === 7 || this.buttonState === 9) {
          this.showApproval()
        }
      }
    },
    //  完成任务
    completeTask() {
      var data = [
          {
            taskId: this.taskId,
            userId: this.uid,
            groupId: this.query.groupId || ''
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/completeInnerTask'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.closeTaskForm()
              this.loading.submit = false
              if (this.source !== 'chat') {
                //非群聊 刷新页面
                this.refresh()
              }
            } else if (data.code === 464) {
              //已经完成的任务再次点击完成 刷新页面
              this.$message({
                message: data.message,
                type: 'info',
                duration: '2000',
                onClose: () => {
                  location.reload()
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {
                  this.loading.submit = false
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    // 打开审批弹窗
    showApproval() {
      this.$refs.approvalCard.showApproval()
    },
    updataList() {
      if (this.source !== 'chat') {
        //非群聊 刷新页面
        this.refresh()
      }
      this.closeTaskForm()
    },
    //创建任务
    createTask() {
      var data = {
        ...this.taskForm
      }

      const supportedImageSuffixes = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'bmp']
      const officeArr = ['docx', 'xlsx', 'ppt', 'txt', 'doc', 'xls', , 'pdf', 'pptx']

      // } else {
      //   var suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      //   const supportedImageSuffixes = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'bmp']
      //   const officeArr = ['docx', 'xlsx', 'ppt', 'txt', 'doc', 'xls', , 'pdf', 'pptx']
      //   if (supportedImageSuffixes.includes(suffix)) {
      //     this.isShowImage = true
      //     this.imgSrc = this.$tools.getStsFileUrl(this.$store.state.uid, 'https://www.ccccdt.com/ccccdt/' + file.key)
      //   }
      //   if (officeArr.includes(suffix)) {
      //     this.isShowImage = true
      //     this.fileSrc = this.$tools.getStsFileUrl(this.$store.state.uid, 'https://www.ccccdt.com/ccccdt/' + file.key)
      //   }
      // }
      data.startTime = data.startTime.substring(0, 10) + ' 00:00:00'
      data.endTime = data.endTime.substring(0, 10) + ' 23:59:59'
      data.userId = this.uid
      data.rootProjectId = this.rootProjectId
      data.taskAnnex = JSON.stringify(
        data.taskAnnex.map((item) => {
          item.fileSize = item.size
          item.fileName = item.name
          item.fileUrl = item.url
          item.filekey = item.key
          item.fileSuffix = item.fileName.substring(item.fileName.lastIndexOf('.') + 1)
          if (supportedImageSuffixes.includes(item.fileSuffix)) {
            item.fileType = '1'
          }
          if (officeArr.includes(item.fileSuffix)) {
            item.fileType = '2'
          }

          return item
        })
      )
      var domain = [this.$store.state.DOMAIN],
        path = ['/project/task/addInnerTask'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, [data])
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (this.source === 'chat') {
                //任务创建成功返回任务id
                this.option.taskId = data.data
                //群内创建任务直接发送
                this.sendTaskMsg(this.query.groupId)
              } else {
                this.$message({
                  message: data.message,
                  type: 'success',
                  duration: '2000',
                  onClose: () => {
                    this.loading.submit = false
                    this.refresh({ nodeId: this.taskForm.nodeId })
                    this.closeTaskForm()
                  }
                })
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {
                  this.loading.submit = false
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    //编辑任务
    editTask(opt) {
      if (this.isModeEdit) {
        if (opt.taskName) {
          //验证
          this.$refs['taskForm'].validateField('taskName', (error) => {
            if (!error) {
              this.editTaskAxios(opt)
            }
          })
        } else if (opt.output) {
          //验证
          this.$refs['taskForm'].validateField('output', (error) => {
            if (!error) {
              this.editTaskAxios(opt)
            }
          })
        } else {
          this.editTaskAxios(opt)
        }
      }
    },
    //编辑任务 请求接口
    editTaskAxios(opt) {
      var data = [
          Object.assign(
            {
              userId: this.uid,
              rootProjectId: this.rootProjectId,
              nodeId: this.taskForm.nodeId,
              taskId: this.taskId,
              groupId: this.query.groupId || ''
            },
            opt
          )
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/editInnerTask'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                duration: '2000',
                onClose: () => {
                  this.getTaskDetail()
                  if (this.source !== 'chat') {
                    this.refresh()
                  }
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    //关闭任务
    closeTask() {
      var data = [{ userId: this.uid, taskId: this.taskId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/closeInnerTask'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                duration: '2000',
                onClose: () => {
                  // this.taskState = 8
                  this.getTaskDetail()
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    //激活任务
    restartTask() {
      var data = [{ userId: this.uid, taskId: this.taskId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/restartInnerTask'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                duration: '2000',
                onClose: () => {
                  //this.taskState = 1
                  this.getTaskDetail()
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    //认领任务
    takeTask() {
      var data = [{ userId: this.uid, groupId: this.query.groupId || '', taskId: this.taskId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/task/getInnerTask'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                duration: '2000',
                onClose: () => {
                  if (this.source !== 'chat') {
                    this.refresh()
                  } else {
                    this.loading.submit = false
                    this.closeTaskForm()
                    //等待推送
                  }
                }
              })
            } else if (data.code === 464) {
              //已经认领的的任务再次认领 刷新页面
              this.$message({
                message: data.message,
                type: 'info',
                duration: '2000',
                onClose: () => {
                  location.reload()
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {
                  this.loaded.submit = false
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    //跳转组织架构
    goEditOrg() {
      this.dialogVisible = false
      if (this.projectState === 0) {
        this.$router.push('/main/#/pm?tab=create&elTab=1&rootProjectId=' + this.rootProjectId)
      } else {
        this.$router.push('/main/#/pm?tab=detail&elTab=1&rootProjectId=' + this.rootProjectId)
      }
    },
    //关闭卡片
    closeTaskForm() {
      this.resetForm()
      this.dialogVisible = false
    },
    /* *************上传文件操作******************** */
    handleChange(file, fileList) {
      var url = 'https://www.ccccdt.com/ccccdt/' + file.raw.key
      file = {
        ...file,
        key: null,
        url: url,
        createUid: this.uid,
        isCanReName: true,
        newFileName: '',
        userName: decodeURIComponent(this.uname)
      }
      this.loading.submit = true
      this.taskForm.taskAnnex = [...this.taskForm.taskAnnex, file]
    },
    httpRequest(req) {
      this.$tools.getStsClient(this, req.file, (state, client, bucketName, file) => {
        if (state) {
          this.uploadFile(client, bucketName, file)
        }
      })
    },

    uploadFile(client, bucketName, file) {
      var time = new Date().getTime() + '',
        key = time.split('').reverse().join('') + this.$tools.getRandomName(file)
      var params = {
        Body: file,
        Bucket: bucketName,
        Key: key,
        ContentDisposition: `attachment; filename="${encodeURIComponent(file.name)}"`
      }
      client
        .putObject(params, (err, data) => {
          if (err) {
          } else {
            this.onSuccess(file, key)
          }
        })
        .on('httpUploadProgress', (progress) => {
          this.onProgress(progress, file)
        })
    },
    onSuccess(file, key) {
      if (this.isModeCreate) {
        this.taskForm.taskAnnex.forEach((item) => {
          if (item.uid == file.uid) {
            item.status = 'success'
            item.key = key
            item.fileKey = key
            item.url = 'https://www.ccccdt.com/ccccdt/' + key
          }
        })
        this.loading.submit = false
      } else if (this.isModeEdit && this.taskState == 1) {
        var fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
        var supportedImageSuffixes = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'bmp']
        var officeArr = ['docx', 'xlsx', 'ppt', 'txt', 'doc', 'xls', , 'pdf', 'pptx']
        if (supportedImageSuffixes.includes(fileSuffix)) {
          var fileType = '1'
        }
        if (officeArr.includes(fileSuffix)) {
          var fileType = '2'
        }
        this.taskForm.taskAnnex.forEach((item) => {
          if (item.uid == file.uid) {
            item.status = 'success'
            item.key = key
            item.fileKey = key
            item.url = 'https://www.ccccdt.com/ccccdt/' + key
          }
        })
        var data = this.taskForm.taskAnnex.map((item) => {
          if ('action' in item) {
            return item
          } else {
            return {
              action: '1',
              fileKey: item.key,
              fileName: item.name,
              fileSize: item.size,
              fileSuffix: fileSuffix,
              fileType: fileType,
              fileUrl: item.url
            }
          }
        })
        this.editTask({ taskAnnex: JSON.stringify(data) })
      }
    },
    onProgress(progress, file) {
      if (progress.lengthComputable) {
        var index = this.taskForm.taskAnnex.findIndex((item) => item.uid === file.uid)
        this.taskForm.taskAnnex[index].percentage = Number(((progress.loaded / progress.total) * 100).toFixed(0))
      }
    },
    handleRemove(file) {
      if (this.isModeEdit && this.taskState == 1) {
        file.action = '2'
        this.taskForm.taskAnnex = this.taskForm.taskAnnex.filter((item) => item.uid !== file.uid)
        var data = [...this.taskForm.taskAnnex, file]
        this.editTask({ taskAnnex: JSON.stringify(data) })
      } else {
        this.taskForm.taskAnnex = this.taskForm.taskAnnex.filter((item) => item.uid !== file.uid)
      }
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 20MB!')
        // 找到要删除的对象的索引
        let index = this.taskForm.taskAnnex.findIndex((item) => item.uid === file.uid)
        // 如果找到了对象，使用splice方法删除它
        if (index !== -1) {
          this.taskForm.taskAnnex.splice(index, 1)
        }
      }
      return isLt2M
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    reName(file) {
      file.isCanReName = !file.isCanReName
      file.newFileName = file.name.substring(0, file.name.lastIndexOf('.'))
    },
    async sureReName(item) {
      if (this.isModeCreate) {
        if (item.newFileName == '') {
          this.$message('请输入新的文件名')
        } else {
          var isSuccess = await this.resetTyyFileName(item.newFileName + item.name.substring(item.name.lastIndexOf('.')), item.fileKey)
          if (isSuccess) {
            item.name = item.newFileName + isSuccess.substring(isSuccess.lastIndexOf('.'))
            item.isCanReName = !item.isCanReName
            item.url = 'https://www.ccccdt.com/ccccdt/' + isSuccess
            item.key = isSuccess
          }
        }
      } else if (this.isModeEdit && this.taskState == 1) {
        if (item.newFileName == '') {
          this.$message('请输入新的文件名')
        } else {
          var isSuccess = await this.resetTyyFileName(item.newFileName + item.name.substring(item.name.lastIndexOf('.')), item.fileKey)
          if (isSuccess) {
            item.name = item.newFileName + isSuccess.substring(isSuccess.lastIndexOf('.'))
            item.fileName = item.newFileName + isSuccess.substring(isSuccess.lastIndexOf('.'))
            item.action = '3'
            item.isCanReName = !item.isCanReName
            item.fileKey = isSuccess
            item.fileUrl = 'https://www.ccccdt.com/ccccdt/' + isSuccess
            this.editTask({ taskAnnex: JSON.stringify(this.taskForm.taskAnnex) })
          }
        }
      }
    },
    // 文件重命名
    resetTyyFileName(fileName, objectName) {
      var data = [{ fileName: fileName, objectName: objectName, userId: this.uid }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/cloud/resetTyyFileName'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      return new Promise((resolve, reject) => {
        Promise.all(dataAxios)
          .then((response) => {
            this.$tools.callbackAxios(this, response, (response) => {
              var data = response[0].data
              if (data.code === 200) {
                resolve(data.data)
              } else {
                resolve(false)
              }
            })
          })
          .catch((error) => {
            console.error('发生错误:', error)
            reject(error)
          })
      })
    },
    downLoad(item) {
      var URL = this.$tools.getStsFileUrl(this.$store.state.uid, item.fileUrl || item.url)
      this.downloadFile(URL, item.fileName)
    },
    downloadFile(url, filename, mimeType) {
      // 如果是URL，直接创建a标签下载
      // 检查是否为同源URL
      if (new URL(url).origin !== window.location.origin) {
        // 对于非同源URL，使用window.open在新标签页中打开链接
        window.open(url, '_blank')
      } else {
        // 对于同源URL，可以创建一个临时的<a>元素并模拟点击
        const a = document.createElement('a')
        a.href = url
        a.download = filename
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    },
    refresh(opt) {
      var fullPath = this.$route.fullPath.split('?'),
        path = fullPath[0],
        query = this.query
      if (opt) {
        query = Object.assign(query, opt)
      }
      query.refresh = Math.random()
      this.$router.push(path + '?' + this.$qs.stringify(query))
    },
    closeShow(done) {
      this.imgSrc = ''
      this.fileSrc = ''
      done()
    },
    focusTextarea(index) {
      this.textareaFocus.splice(index, 1, true)
    },
    blurTextarea(index) {
      this.textareaFocus.splice(index, 1, false)
    },
    /*************************** 文件上传结束***********************************************************/
    /********************转发任务******************************/
    showSendDialog() {
      this.isShowSendDialog = true
    },
    // 获取所有的群聊列表 排除系统群
    getGroupList() {
      var data = [
          {
            userId: this.uid,
            projectId: this.rootProjectId
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/projectGroup/groupList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              var items = data.data.items.filter((item) => {
                return !!item.groupId
              })
              this.groupList = items.map((item) => {
                item.checked = false
                return item
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    sendTask() {
      var toGroupIds = this.selectGroupList.map((item) => {
        return item.groupId
      })
      this.loading.sendTask = true
      this.sendTaskMsg(toGroupIds.join(), this.textareaGroup)
    },
    quitSendTask() {
      //重置
      this.isShowSendDialog = false
      this.groupList.forEach((item) => {
        item.checked = false
      })
      this.textareaGroup = ''
    },
    //发送任务
    sendTaskMsg(toGroupIds, textareaGroup) {
      var data = [{ userId: this.uid, toGroupIds: toGroupIds, taskId: this.taskId }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/projectGroup/sendInnerTaskMsg'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (this.loading.submit) {
                //来自群内创建任务直接发送
                this.$message({
                  message: data.message,
                  type: 'success',
                  duration: '2000',
                  onClose: () => {
                    //任务发送完毕后才结束创建loading
                    this.loading.submit = false
                    this.closeTaskForm()
                    //等待推送...
                  }
                })
              } else {
                //其他地方转发任务
                if (textareaGroup) {
                  this.sendTaskText(toGroupIds, textareaGroup)
                } else {
                  this.$message({
                    message: data.message,
                    type: 'success',
                    duration: '2000',
                    onClose: () => {
                      this.loading.sendTask = false
                      this.quitSendTask() //重置
                    }
                  })
                }
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {
                  this.loading.submit = false
                  this.loading.sendTask = false
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    //发送任务附带留言
    sendTaskText(toGroupIds, textareaGroup) {
      var data = [{ userId: this.uid, toGroupIds: toGroupIds, taskId: this.taskId, msg: textareaGroup }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/projectGroup/sendInnerTaskText'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success',
                duration: '2000',
                onClose: () => {
                  this.loading.sendTask = false
                  this.quitSendTask() //重置
                }
              })
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '2000',
                onClose: () => {
                  this.loading.sendTask = false
                }
              })
            }
          })
        })
        .catch((error) => {})
    },
    closeFormDelay() {
      this.IsShowFormDelay = false
    }
  },
  watch: {
    //监听option触发resetData
    option: {
      handler(newVal, oldVal) {
        this.resetData()
      },
      deep: true //深度监听
      // immediate: true
    }
  },
  mounted() {
    this.$root.$on('guide-to-14', () => {
      this.currStep = 14
      this.dialogVisible = false
    })
    this.$root.$on('guide-to-16', () => {
      this.currStep = 16
      this.dialogVisible = false
    })
    this.$root.$on('guide-to-close', () => {
      this.currStep = -1
      this.dialogVisible = false
    })
    this.$root.$on('guide-to-end', () => {
      this.currStep = -1
    })
  }
}
</script>
<style scoped>
.mr10 {
  margin-right: 10px;
}
.el-dialog__wrapper >>> .el-dialog__header {
  padding-bottom: 16px;
  border-bottom: 1px solid #e9eef7;
}

.el-dialog__wrapper >>> .el-dialog__body {
  padding: 0;
}
.dt-task-card {
  display: flex;
}
/* .dt-task-name {
} */
.dt-card-form {
  width: 800px;
  padding: 12px 0;
}
.dt-icon-send {
  position: absolute;
  right: 70px;
  top: 20px;
}
.dt-icon-send i {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: block;
  background: url(/skb/img/card/ic_zf20-normal.png) no-repeat scroll 0 0;
}
.dt-icon-send i:hover {
  background-image: url(/skb/img/card/ic_zf20-hover.png);
}
.dt-icon-close {
  position: absolute;
  right: 20px;
  top: 20px;
}
.dt-icon-close i {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: block;
  background: url(/skb/img/card/ic_close20-normal.png) no-repeat scroll 0 0;
}
.dt-icon-close i:hover {
  background-image: url(/skb/img/card/ic_close20-hover.png);
}

/* .el-dialog__wrapper >>> .el-dialog__headerbtn .el-dialog__close {
  font-size: 18px;
} */
/* .dt-card-form .el-form {

} */
.dt-card-form >>> .el-input:not(.is-disabled) .el-input__inner {
  color: #1f1f1f;
}
.dt-card-form >>> .el-input.is-disabled .el-input__inner {
  color: #909399;
}
.dt-form-name {
  padding: 0 20px 0 10px;
}
.dt-form-name .dt-name-p {
  font-size: 20px;
  color: #1f1f1f;
  margin-left: 10px;
  padding: 8px 0 18px;
}

.dt-card-form >>> .el-form-item__content {
  line-height: 36px;
}
.dt-card-form >>> form .el-form-item {
  margin-bottom: 18px;
}
.dt-card-form >>> form .el-form-item span.dt-form-view-text {
  color: #1f1f1f;
}
.dt-card-form >>> form .el-form-item p.dt-form-view-multext {
  line-height: 22px;
  margin-top: 10px;
  color: #1f1f1f;
}
.dt-card-form >>> form .el-form-item .el-form-item__error {
  padding-top: 1px;
}
.dt-card-form >>> .el-form-item .el-form-item__label {
  text-align: left;
  line-height: 36px;
}
.dt-card-form form .dt-form-bot {
  position: relative;
  padding: 12px 20px 0 20px;
  border-top: 1px solid #e9eef7;
  height: 36px;
  line-height: 36px;
}
.dt-card-form form .dt-form-item-file {
  margin-bottom: 2px;
}
.dt-card-form form .dt-form-bot-record {
  float: left;
}
.dt-card-form form .dt-form-bot-btn {
  float: right;
}

.dt-form-bot-record span {
  color: #909399;
  font-size: 12px;
}
.dt-form-bot-record em {
  color: #e9eef7;
  font-size: 12px;
  margin: 0 12px;
}
.dt-card-record {
  width: 520px;
  padding: 8px 20px 20px 20px;
  border-left: 1px solid #e9eef7;
}
.dt-record-list {
  max-height: 800px;
  overflow: auto;
  padding: 10px 0;
}
.dt-task-info {
  margin-bottom: 20px;
  /* display: flex;
  padding: 0 20px; */
}
.dt-form-items {
  display: flex;
  padding: 12px 20px 0;
}
.dt-card-form .dt-form-items >>> .el-form-item {
  padding: 0;
  width: 190px;
}
.dt-form-tabs {
  padding: 0 20px;
  height: 735px;
}
.dt-card-form >>> form .el-form-item .dt-info-item {
  width: 145px;
  display: flex;
  line-height: 1;
}
.dt-item-icon {
  position: relative;
}
.dt-item-icon >>> .el-date-editor {
  width: 65px;
  left: -25px;
  font-size: 1px;
  top: 35px;
  opacity: 0;
  position: absolute;
}
.dt-item-icon >>> .el-date-editor .el-input__inner {
  height: 1px;
  line-height: 1px;
}
.dt-item-icon >>> .el-date-editor .el-input__prefix,
.dt-item-icon >>> .el-date-editor .el-input__suffix {
  display: none;
}
.dt-info-item .dt-select {
  margin-right: 10px;
}
.dt-icon-img {
  width: 36px;
  height: 36px;
  display: inline-block;
  margin-right: 8px;
  cursor: pointer;
}
.dt-icon-state-1 {
  background-image: url(/skb/img/card/ic-drl36.png);
}
.dt-icon-state-2 {
  background-image: url(/skb/img/card/ic-jxz36.png);
}
.dt-icon-state-3 {
  background-image: url(/skb/img/card/ic-sp36.png);
}
.dt-icon-state-4 {
  background-image: url(/skb/img/card/ic-gb36.png);
}
.dt-icon-state-5 {
  background-image: url(/skb/img/card/ic-wc36.png);
}
.dt-icon-master-0 {
  background-image: url(/skb/img/card/bu-xzry36-normal.png);
}
.dt-icon-master-0:hover {
  background-image: url(/skb/img/card/bu-xzry36-hover.png);
}
.dt-icon-master-1 {
  background-image: url(/skb/img/card/bu-xzry36-normal.png);
}
.dt-icon-date-0 {
  background-image: url(/skb/img/card/bu-time36-normal.png);
}
.dt-icon-date-0:hover {
  background-image: url(/skb/img/card/bu-time36-hover.png);
}
.dt-icon-date-1 {
  background-image: url(/skb/img/card/ic-time36.png);
  cursor: default;
}
.dt-icon-text {
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background-color: #0077ff;
  color: #fff;
  display: block;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}
.dt-icon-text .el-icon-close {
  position: absolute;
  right: -3px;
  top: -3px;
  cursor: pointer;
  color: #fff;
  background-color: #c0c4cc;
  border-radius: 50%;
}
.dt-icon-text .el-icon-close:hover {
  background-color: #909399;
}

.dt-info-item h4 {
  color: #606266;
  font-weight: normal;
  margin-bottom: 5px;
}
.dt-info-item h4.is-required:after {
  content: '*';
  color: #f5222d;
  margin-left: 4px;
}
.dt-info-item span {
  color: #c0c4cc;
}
.dt-info-item b {
  font-weight: normal;
  color: #1f1f1f;
}
/*覆盖el-ui icon*/
.dt-task-card .el-form >>> .el-form-item > .el-form-item__label::before {
  font-family: element-icons !important;
  /*speak: none;*/
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  color: #909399;
  margin-right: 10px;
  vertical-align: -2px;
}
.dt-task-card .el-form >>> .dt-form-item-sszy > .el-form-item__label:before {
  content: '\e765';
}
.dt-task-card .el-form >>> .dt-form-item-rwcz > .el-form-item__label:before {
  content: '\e748';
}

.dt-task-card .el-form >>> .dt-form-item-xmjd > .el-form-item__label:before {
  content: '\e73c';
}
.dt-task-card .el-form >>> .dt-form-item-rwms > .el-form-item__label:before {
  content: '\e78c';
}
.dt-task-card .el-form >>> .dt-form-item-sfsp > .el-form-item__label:before {
  content: '\e73e';
}
.dt-task-card .el-form >>> .dt-form-item-splx > .el-form-item__label:before {
  content: '\e76b';
}
.dt-task-card .el-form >>> .dt-form-item-splc > .el-form-item__label:before {
  content: '\e75b';
}
.dt-task-card .el-form >>> .dt-form-item-file > .el-form-item__label:before {
  content: '\e77d';
}
.el-select {
  width: 100%;
}
/* .el-textarea {
} */
.el-textarea >>> .el-textarea__inner {
  resize: none;
  line-height: 24px;
  color: #1f1f1f;
}
.el-textarea.is-disabled >>> .el-textarea__inner {
  color: #909399;
}
.dt-form-group >>> .el-radio__input.is-disabled + span.el-radio__label {
  color: #909399;
}
.dt-splc-list {
  display: flex;
}
.dt-splc-item {
  line-height: 25px;
}
.dt-splc-item > span {
  display: block;
  text-align: center;
  color: #1f1f1f;
}
.dt-splc-item .dt-select {
  display: block;
}
.dt-splc-list .dt-icon-text,
.dt-splc-list .dt-icon-img {
  margin-right: 0;
  display: block;
}
.dt-splc-line {
  width: 40px;
  height: 0px;
  border-top: 1px dashed #e9eef7;
  margin-top: 18px;
}
.dt-card-form >>> form > .el-form-item.dt-form-item-file {
  margin-bottom: 0;
}
/*file*/
.dt-file-uplpad {
  text-align: right;
}
.dt-file-list {
  border: 1px solid #e9eef7;
  min-height: 28px;
  max-height: 140px;
  padding: 4px;
  font-size: 12px;
}
.dt-file-list p {
  font-size: 12px;
  color: #909399;
  line-height: 48px;
  text-align: center;
}
.dt-file-item {
  display: flex;
  line-height: 28px;
  padding: 0 4px;
  border-radius: 4px;
}
.dt-file-item:hover {
  background-color: #f0f5ff;
}

.dt-item-file-info {
  flex: 1;
}
.dt-item-file-info i {
  color: #c0c4cc;
}
.dt-item-file-user {
  width: 150px;
}
.dt-item-file-btn {
  width: 120px;
}
.el-upload__tip {
  display: inline-block;
  font-size: 12px;
  color: #909399;
  margin-right: 10px;
  margin-top: 0;
}
::v-deep .el-upload {
  float: right;
}
::v-deep .el-upload i,
::v-deep .el-upload span {
  color: #1f1f11;
}
.dt-content-approval-achievement {
  display: flex;
  align-items: center;
  height: 28px;
  line-height: 28px;
  padding: 0 5px;
}
.dt-content-approval-achievement .dt-content-approval-filename {
  width: 470px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1f1f1f;
}
.dt-content-approval-achievement .dt-content-approval-filename i {
  margin-right: 4px;
}
.dt-content-approval-achievement .dt-content-approval-username {
  width: 130px;
  color: #1f1f1f;
  padding-left: 20px;
}
.dt-content-approval-achievement .dt-content-approval-username.is-view {
  width: 80px;
}
.dt-content-approval-achievement .dt-content-approval-time {
  width: 160px;
}
.dt-content-approval-achievement .dt-content-approval-btn {
  width: 120px;
  text-align: right;
}
.dt-content-approval-achievement .dt-content-approval-btn.is-view {
  width: 32px;
}
.dt-content-approval-achievement .dt-content-approval-btn >>> .el-button span {
  font-size: 12px !important;
}
.dt-content-approval-achievement >>> .el-input {
  width: 470px;
}
.dt-content-approval-achievement:hover {
  background-color: #f0f5ff;
}
.dt-file-progress >>> .el-progress-bar {
  padding-right: 40px;
  margin-right: -45px;
}
.dt-form-group {
  height: 655px;
  margin-bottom: 30px;
  overflow: auto;
}
/* .dt-file-uplpad >>> div {
  display: flex;
  justify-content: flex-end;
}
.dt-file-uplpad >>> div .el-upload__tip {
  order: 2;
} */

/*金额*/
.dt-je-china {
  top: 0;
  right: 340px;
  color: #909399;
}
.dt-st-list {
  padding: 5px 20px;
  height: 655px;
  overflow: auto;
}
.dt-st-list-item:nth-child(even) {
  margin-bottom: 20px;
}
.dt-item-title {
  display: flex;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
}
.dt-item-title span:nth-child(1) {
  color: #606266;
}
.dt-item-title span:nth-child(1) i {
  color: #909399;
  font-size: 18px;
  margin-right: 8px;
}
.dt-item-title span:nth-child(2) {
  font-size: 12px;
}
.dt-item-title span:nth-child(2) b {
  color: #1f1f11;
  font-weight: normal;
  margin-right: 3px;
}
.dt-item-title span:nth-child(2) em {
  color: #606266;
}
/* .dt-item-box {
  border: 1px solid #e9eef7;
  padding: 4px 0;
} */
.dt-item-box-list {
  padding: 4px;
  border: 1px solid #e9eef7;
  border-bottom: 0;
}
.dt-item-box-listitem {
  display: flex;
  height: 28px;
  line-height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
}
.dt-item-box-listitem:hover {
  background-color: #f0f5ff;
}
.dt-item-box-list-data {
  width: 470px;
}
.dt-item-box-list-data i {
  margin-right: 4px;
  color: #c0c4cc;
}
.dt-item-box-list-name {
  width: 80px;
}
.dt-item-box-list-time {
  width: 160px;
}
.dt-item-box-list-btn {
  width: 30px;
}

.dt-item-box-opinion {
  padding: 0 12px 4px;
  border: 1px solid #e9eef7;
}
.dt-box-opi-title {
  display: flex;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
}
.dt-box-opi-title span:nth-child(1) {
  color: #606266;
}
.dt-box-opi-title span:nth-child(1) i {
  color: #909399;
  font-size: 18px;
  margin-right: 8px;
}
.dt-box-opi-title span:nth-child(2) {
  font-size: 12px;
}
.dt-box-opi-title span:nth-child(2) b {
  color: #1f1f11;
  font-weight: normal;
  margin-right: 3px;
}
.dt-box-opi-title span:nth-child(2) em {
  color: #606266;
}
.dt-box-opi-box {
  background-color: #fafafa;
  padding: 12px;
  font-size: 12px;
  color: #1f1f1f;
}
.dt-box-opi-box-log {
  display: flex;
  margin-bottom: 10px;
}
.dt-box-opi-box-file {
  display: flex;
}
.dt-box-opi-box-file span {
  margin-top: 3px;
}
.dt-box-opi-box-filelist p {
  line-height: 20px;
}
.dt-box-opi-box-filelist p i {
  color: #c0c4cc;
  margin-right: 4px;
}
.dt-box-opi-box-filelist p span {
  margin-right: 20px;
}
.dt-box-opi-box-filelist p >>> .el-button {
  padding: 0;
}
.dt-item-box-wait {
  padding: 8px 12px 8px 12px;
  border: 1px solid #e9eef7;
}
.dt-item-box-wait span {
  color: #85a5ff;
  font-size: 12px;
}
::v-deep .el-progress__text {
  font-size: 12px !important;
}
.dt-record-null {
  text-align: center;
  height: 800px;
  line-height: 800px;
  color: #909399;
}
.dt-task-card >>> .el-tabs__header {
  margin-bottom: 20px;
}
.dt-record-list >>> .el-timeline-item__wrapper {
  top: -1px;
}
.dt-record-list >>> .el-timeline-item {
  padding: 3px 0 8px;
}
.dt-record-list >>> .el-card__body p {
  line-height: 18px;
  margin-bottom: 0;
}
.dt-record-list >>> .el-card__body p:not(:nth-child(1)) {
  margin-top: 8px;
}
.dt-res-output {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/***********************发送任务*****************************/
.el-dialog__wrapper >>> .dt-send-task {
  width: 680px;
}
.el-dialog__wrapper >>> .dt-send-task .el-dialog__header {
  padding: 0;
}
.dt-st-main {
  display: flex;
  width: 680px;
  height: 630px;
  overflow: auto;
}
.dt-st-left {
  padding: 20px;
  width: 299px;
  border-right: 1px solid #e9eef7;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.dt-st-left h2 {
  font-weight: normal;
  color: #1f1f1f;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-st-group {
  overflow: auto;
}
.dt-st-left .dt-st-group {
  flex: 1;
}
.dt-group-item {
  height: 26px;
  line-height: 26px;
  padding: 8px 12px;
  display: flex;
}
.dt-group-item:hover {
  background-color: #f0f5ff;
}
.dt-group-item .el-checkbox {
  margin-right: 10px;
}
.dt-group-item img {
  width: 26px;
  height: 26px;
  margin-right: 13px;
}
.dt-group-item span {
  flex: 1;
}
.dt-st-right {
  padding: 20px 20px 12px 20px;
  width: 300px;
  display: flex;
  flex-direction: column;
}
.dt-st-right .dt-st-group {
  height: 378px;
  border-bottom: 1px solid #e1e6f0;
}
.dt-st-right h4 {
  font-weight: normal;
  font-size: 12px;
  color: #1f1f11;
  margin-bottom: 10px;
}
.dt-group-item i.el-icon-delete {
  line-height: 26px;
  cursor: pointer;
}
.dt-group-item i.el-icon-delete:hover {
  color: #2f54eb;
}
.dt-st-form {
  margin-bottom: 15px;
}
.dt-form-title {
  height: 54px;
  line-height: 54px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.dt-form-title span {
  width: 285px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dt-form-title i {
  line-height: 54px;
}
.dt-form-textarea .el-textarea >>> .el-textarea__inner {
  height: 52px;
}
.dt-st-line {
  width: 340px;
  height: 1px;
  background-color: #e1e6f0;
  margin: 0 0 12px -20px;
}
.dt-st-btn {
  text-align: right;
}
.dt-st-btn >>> .el-button {
  width: 96px;
  padding: 10px 5px;
}
</style>
